<script setup lang='ts'>
import { ref, reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  GetDeviceType,
  delDeviceType
} from '@/api/http'
defineProps({
  showDialog: {
    type: Function,
    default: () => {}
  }
})

// 定义变量
const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}

const pageInfo:any = reactive({
  total: 100,
  pageSize: 10,
  pageNum: 1
})

// 表格数据
const tableData:any = ref([])

onMounted(() => {
  getDeviceListData()
})
// 获取初始化数据
const getDeviceListData = async () => {
  tableData.value = []
  let pagData = {
    SkipCount: (pageInfo.pageNum - 1) * pageInfo.pageSize,
    MaxResultCount: pageInfo.pageSize,
    Sorting: ''
  }
  pagData.Sorting = 'lastModificationTime desc'
  let res = await GetDeviceType({ ...pagData })
  tableData.value = [ ...res.result.items ]
  pageInfo.total = res.result.totalCount
  console.log('设备列表---->',tableData,res)
}

// 删除设备类型
const deleteItem = async (row:any) => {
  ElMessageBox.confirm(
    '确定要删除该处理意见?',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      let res = await delDeviceType({
        id: row.id + '',
        SensorType: row.sensorType
      })
      if (res.success) {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
      } else {
        ElMessage({
          type: 'error',
          message: '删除失败!'
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}

// 改变每页数量
const handlePlanSizeChange = (val: number) => {
  pageInfo.pageSize = val
  getDeviceListData()
}
// 切换页码
const handlePlanCurrentChange = (val: number) => {
  pageInfo.pageNum = val
  getDeviceListData()
}

// 向外暴露的函数与变量
defineExpose({
  getDeviceListData
})
</script>

<template>
  <el-table
    :cell-style="cellStyle"
    :header-cell-style="headStyle"
    :data="tableData"
    max-height="640"
    size="small"
  >
    <el-table-column
      prop="name"
      label="名称"
    />
    <el-table-column
      prop="shortName"
      label="简称"
    />
    
    <el-table-column
      prop="desc"
      label="描述"
    />
    <el-table-column
      prop="name"
      label="操作"
    >
      <template #default="scope">
        <div class="btn-box">
          <div
            class="update-btn"
            @click="showDialog(1, scope.row)"
          >
            修改
          </div>
          <div
            class="delete-btn"
            @click="deleteItem(scope.row)"
          >
            删除
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-box">
    <el-pagination
      v-model:current-page="pageInfo.pageNum"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handlePlanSizeChange"
      @current-change="handlePlanCurrentChange"
    />
  </div>
</template>

<style scoped lang=scss>
.pagination-box {
  margin-top: 10px;
}

.btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  >div {
    width: 56px;
    height: 28px;
    color: #fff;
    border-radius: 5px;

    /* background-color: red; */

    &:hover {
      cursor: pointer;
    }
  }

  .update-btn {
    background-color: #e6a23c;
  }

  .delete-btn {
    margin-left: 10px;
    background-color: #f56c6c;
  }
}
</style>